<template>
  <div>
    <el-dialog
        title="签收"
        :visible="true"
        :show-close="false"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        width="80%"
    >
      <div class="content">
        <el-form label-position="top" label-width="80px" :model="formLabelAlign">
          <el-form-item label="签收日期" class="time">
            <el-button type="primary" round plain @click="handleDate">{{formLabelAlign.date !== '选择签收日期' ? formLabelAlign.date:'选择签收日期'}}</el-button>
          </el-form-item>
          <el-form-item label="签收单">
            <van-uploader v-model="fileList" multiple accept="image/*"/>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
                type="textarea"
                placeholder="请输入备注"
                v-model="formLabelAlign.remark"
                resize="none"
                :autosize="{ minRows: 2, maxRows: 4}"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="bottomBtn">
        <el-button plain @click="handleCancel">取消操作</el-button>
        <el-button type="primary" plain @click="handleOk">确认签收</el-button>
      </div>
      <div class="select-time">
        <van-datetime-picker
            v-if="isShow"
            v-model="currentDate"
            type="datetime"
            title="选择签收日期"
            @confirm="confirm"
            @cancel="cancel"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formatTime } from "@/assets/js/common"
import { $export } from "@/api/export"
// import Moment from 'moment'

export default {
  // 组件属性、变量
  props: {
    signObj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  // 变量
  data() {
    return {
      formLabelAlign: {
        date: '选择签收日期',
        remark: '' // 备注
      },
      currentDate: new Date(),
      isShow: false,
      fileList: [], // 文件上传
      types: ['pdf','jpg','png','doc'],
      flag: false
    }
  },
  // 方法
  methods: {
    // 取消
    handleCancel() {
      this.$emit('handleClose')
    },
    // 签收
    handleOk() {
      let text = ''
      if (this.formLabelAlign.date === '选择签收日期') text = '请选择签收日期'
      if (this.fileList.length === 0) text = '请选择上传文件'
      if (text !== '') return this.$msg.fail(text)
      const fileList = []
      this.fileList.forEach(item => fileList.push(item.file))
      fileList.forEach(item => {
        const fileEnd = item.name.split('.')
        const text = fileEnd[fileEnd.length - 1]
        if (this.types.indexOf(text) === -1) this.flag = true
      })
      if (this.flag) {
        this.flag = false
        return this.$msg.fail('文件上传格式错误')
      }
      const obj = {
        receiptFiles: fileList,
        mainWaybillNumber: [`${this.signObj.mainWaybillNumber}`],
        waybillNumber: [`${this.signObj.waybillNumber}`],
        shippedDate: this.signObj.shippingDate,
        consignesDate: `${this.formLabelAlign.date+':00'}`,
        remark: this.formLabelAlign.remark,
        shippingOrderIds: [this.signObj.shippingOrderId],
        purchaser: this.signObj.purchaser,
        id: this.signObj.wid,
        transportId: this.signObj.transportId,
        destinationHarbor: this.signObj.destinationHarbor,
        originHarbor: this.signObj.originHarbor
      }
      $export.receiptFiles(this.toFormData(obj))
             .then(res => {
               if (res.status === 200) {
                 this.$msg.success(res.msg || res.message || '签收成功')
                 this.$emit('handleClose',1)
               }
               else {
                 this.$msg.fail(res.msg || res.message || '签收失败')
               }
             })
             .catch(err => this.$msg.fail(err.msg || err.message || '网络错误,请稍后再试!'))
    },
    // 日期选择
    handleDate() {
      this.isShow = true
      if (this.formLabelAlign.date === '选择签收日期') {
        this.currentDate = new Date()
      }
      else {
        this.currentDate = new Date(this.formLabelAlign.date)
      }
    },
    // 关闭日期选择器
    cancel() {
      this.isShow = false
    },
    // 日期选择
    confirm() {
      this.isShow = false
      this.formLabelAlign.date = formatTime(this.currentDate)
    },
    //格式化成formData
    toFormData(val) {
      let formData = new FormData()
      for (let i in val) {
        isArray(val[i], i)
      }

      function isArray(array, key) {
        if (array == undefined || typeof array == 'function') {
          return false
        }
        if (typeof array != 'object') {
          formData.append(key, array)
        } else if (array instanceof Array) {
          if (array.length == 0) {
            formData.append(`${key}`, '')
          } else {
            for (let i in array) {
              // 判断文件
              if (array[i] instanceof File) {
                formData.append(`${key}`, array[i])
              } else if (typeof array[i] != 'object') {
                formData.append(`${key}`, array[i])
              } else {
                for (let j in array[i]) {
                  isArray(array[i][j], `${key}[${i}].${j}`)
                }
              }
            }
          }
        }
        // else if (array instanceof Moment) {
        //   formData.append(`${key}`, array['_d'])
        // }
        else {
          let arr = Object.keys(array)
          if (arr.indexOf('uid') == -1) {
            for (let j in array) {
              isArray(array[j], `${key}.${j}`)
            }
          } else {
            formData.append(`${key}`, array)
          }
        }
      }
      return formData
    }
  }
}
</script>

<style scoped>
/deep/.el-dialog__body {
  padding: 10px;
}
/deep/.el-form-item {
  margin-bottom: 5px;
}
/deep/.el-form-item__label {
  padding: 0;
  font-weight: bold;
}
/* 按钮 */
.bottomBtn {
  display: flex;
  justify-content: space-between;
}
/* 修改按钮长度 */
/deep/.time .el-button {
  width: 100%;
  padding-top: 2.333vw !important;
  padding-bottom: 2.333vw !important;
}
/* 时间选择器 */
.select-time {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 1%;
}
.content {
  width: 100%;
  height: 45vh;
  overflow-y: scroll;
}
</style>
